<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <button @click="push">Button</button>
    <span>未完成：{{activeCount}}</span>
    <span>未完成：{{activeCount2}}</span>
  </div>
  <script type="module">
    import { createApp, reactive, computed } from './node_modules/vue/dist/vue.esm-browser.js'
    const data = [
      { text: '1', complated: false },
      { text: '2', complated: true },
      { text: '3', complated: true },
    ]
    createApp({
      setup () {
        const todos = reactive(data)
        const activeCount = computed(() => {
          return todos.filter(item => !item.complated).length
        })
        const activeCount2 = computed({
            get: () => todos.filter(item => !item.complated).length,
            set: val => {
                todos = val
            }
        })
        return {
          activeCount,
          activeCount2,
          push: () => {
            todos.push({ //当响应式数据改变，依赖于该数据的 computed也会改变
              text: (todos.length + 1).toString(),
              complated: false
            })
          }
        }
      }
    }).mount('#app')
  </script>
</body>
</html>
